<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				text-align: center;
			}
			div {
				display: inline-block;
				position: relative;
				width: 100px;
				height: 800px;
				margin: 0 20px;
				top: 80px;
				right: 40px;
			}
			#box0{
				display: inline-block;
				position: relative;
				height: 800px;
			}
			#bigbox{
				width: 100vw;
				height:calc(100vw / 750 * 230);
			}
		</style>
	</head>
	<body>
		<div id="bigbox">
			<div id="box0"></div>
			<div id="box1" style="background-color:#E9A576"></div>
			<div id="box2" style="background-color:#D193ED"></div>
			<div id="box3" style="background-color:#F6EB7C"></div>
			<div id="box4" style="background-color:#729AD6"></div>
			<div id="box5" style="background-color:#95F5B4"></div>
			<div id="box6" style="background-color:#B9F5F5"></div>
			<div id="box7" style="background-color:#E5F25A"></div>
		</div>
		

		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("body").on("click",function(){
					
					setInterval(function(){
						//高度随机数
						var h1 = Math.random() * 800;
						var h2 = Math.random() * 800;
						var h3 = Math.random() * 800;
						var h4 = Math.random() * 800;
						var h5 = Math.random() * 800;
						var h6 = Math.random() * 800;
						var h7 = Math.random() * 800;
						//通过随机数改变每个div的高度，animate自定义动画，animate（{给元素设置动作},时间放这）
						$("#box1").animate({
							"height":+h1+"px",
							});
						$("#box2").animate({
							"height":+h2+"px",
							});
						$("#box3").animate({
							"height":+h3+"px",
							});
						$("#box4").animate({
							"height":+h4+"px",
							});
						$("#box5").animate({
							"height":+h5+"px",
							});
						$("#box6").animate({
							"height":+h6+"px",
							});
						$("#box7").animate({
							"height":+h7+"px",
							});
					},80);
				});
			});
			
		</script>
	</body>
</html>
